<template>
	<view class="filter-back">
		<!-- 筛选 -->
		<view class="filter">
			<text class="title-text">美食类别</text>
			<!-- 多个复选框 -->
			<!-- <checkbox-group class="classifications">
				<view class="class-checkbox" v-for="(item, index) in checkboxData" :key="index">
					<checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" :class="{'checked':checkedArr.includes(String(item.value))}"></checkbox>
					<text>{{item.label}}</text>
				</view>
			</checkbox-group> -->
			<view class="classifications">
				<radio-group @change="radioChange">
					<label v-for="(item, index) in items" :key="index">
						<view :class="radioStyle[index]">
							<radio :value="item.value" :checked="index === current" />
							<view>{{item.label}}</view>
						</view>
					</label>
				</radio-group>
			</view>
			<text class="title-text">人均价格带</text>
			<view class="price">
				<view class="select-price"><!-- 改用movable-area实现拖动 -->
					<!-- <span class="expand selectPrice"></span> -->
					<!-- <view class="uni-padding-wrap uni-common-mt">
						<view class="progress-box">
							<progress :percent="pricePercent" active stroke-width="2" color="#51C061" />
						</view>
					</view> -->
					<movable-area class="zoom">
						<movable-view x="20" direction="all" inertia="true" class="ball" @touchmove='getInfo'></movable-view>
					</movable-area>
					<view style="font: normal 32upx/64upx '思源黑体'; color: #808080;margin-left:20upx;">{{maxPrice}}</view>
				</view>
			</view>
		</view>
		<!-- 底部BTN -->
		<view class="bottom-btn">
			<button @click="cancel" class="cancel" type="default">取消</button>
			<button @click="confirm" class="confirm" type="default">查看</button>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioStyle: [
					'radios-checked',
					'radios',
					'radios',
					'radios',
					'radios',
					'radios'
				],
				items: [{
						'value': 0,
						'label': '所有'
					},
					{
						'value': 1,
						'label': '火锅'
					},
					{
						'value': 2,
						'label': '小吃'
					},
					{
						'value': 3,
						'label': '烘焙'
					},
					{
						'value': 4,
						'label': '海鲜'
					},
					{
						'value': 5,
						'label': '汤羹'
					}
				],
				current: '主食',
				// checkedArr: []
				maxPrice: 14
			}
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = this.items[i].label;
						console.log(this.current);
						for (let i = 0; i < 6; i++) {
							this.radioStyle[i] = 'radios';
						}
						this.radioStyle[i] = 'radios-checked';
						break;
					}
				}
			},
			cancel() {
				uni.navigateBack()
			},
			confirm(item) {
				let typename = this.current;
				let price = this.maxPrice;
				console.log(this.maxPrice);
				uni.request({
					url: 'https://gljh.utools.club/food/FindResByPriceAndtype',
					data: {
						typename: typename,
						price: price,
					},
					method: 'GET',
					success: res => {
						if (res.data != null) {
							console.log(res.data);
							let restMsg = res.data.data;
							// 改变首页的restMsg、返回首页
							wx.switchTab({
								url: './home?restMsg=' + restMsg
							});

						}
					}
				});
			},
			getInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.ball').boundingClientRect(data => {
					// var result = (data.left - 47) / 124 * 50
					var result = (data.left - 25) / 136 * 100
					this.maxPrice = parseInt(result)
					console.log(this.maxPrice)
				}).exec();
			}
		}
	}
</script>

<style scoped lang="less">
	.filter-back {
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		background-color: #aaaaaa;

		.filter {
			width: 100%;
			height: auto;
			background-color: white;
			box-sizing: border-box;
			padding: 20upx;

			.title-text {
				font: normal 32upx/64upx '思源黑体';
				color: #5B5B5B;
			}

			.classifications {
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: space-evenly;
				// align-content: space-evenly;
				// border: 1px dashed #000;
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 20upx;

				radio {
					display: none;
				}

				.radios {
					width: 38%;
					height: 60upx;
					line-height: 60upx;
					// text-align: center;
					display: flex;
					// flex-wrap: wrap;
					justify-content: space-evenly;
					align-content: space-evenly;
					// justify-content: center;
					// border: 1px solid green;
					font-size: 30upx;
					letter-spacing: 10upx;
					background-color: #F3F3F3;
					border-bottom: 1px solid #aaaaaa;
					// color: #62C670;
					margin-bottom: 10upx;
				}

				.radios-checked {
					width: 40%;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					display: flex;
					// flex-wrap: wrap;
					justify-content: space-evenly;
					align-content: space-evenly;
					// justify-content: center;
					border-bottom: 1px solid #62C670;
					font-size: 30upx;
					letter-spacing: 10upx;
					background-color: #F3F3F3;
					color: #62C670;
					margin-bottom: 10upx;
				}

				label:checked {
					color: #62C670;
					border: 1px solid #62C670;
				}
			}

			.price {
				box-sizing: border-box;
				padding: 30upx;
				width: 100%;
				// border: 1px solid blue;
				// animation: showIndex 0.3s;
				// -moz-animation: showIndex  0.3s; 
				// -webkit-animation: showIndex  0.3s; /* myphone,myfirefox work */
				// -o-animation: hideIndex  0.3s; /* myfirefox work */

				/* myfirefox work */
				// .select-price {
				// 	background-color: white;
				// 	width: 100%;
				// 	// height: 10upx;
				// 	border: 1upx solid #ccc;
				// 	border-radius: 10upx;

				// 	.expand {
				// 		// background: #51C061;
				// 		height: 10upx;
				// 		// // width: 10upx;
				// 		// border: 1upx solid red;
				// 		// border-radius: 10upx;
				// 		.selectPrice {
				// 			width: 50%;
				// 			background-color: #51C061;
				// 			// -moz-animation: selectPrice 1s ease-out;
				// 			// -webkit-animation: selectPrice 1s ease-out;
				// 		}
				// 	}
				// }
				.select-price {
					width: 100%;
					display: flex;
					flex-direction: row;
					.zoom {
						width: 85%;
						height: 10upx;
						margin-top: 25upx;
						background-color: #F3F3F3;
						border-radius: 10upx;
						
					}

					.ball {
						width: 40upx;
						height: 40upx;
						border-radius: 100%;
						margin-top: -20upx;
						background-color: #51C061;
					}
				}
			}
		}

		button {
			outline: none;
			// border: 1px solid white;
			border-radius: 0upx;
		}

		.bottom-btn {
			box-sizing: border-box;
			width: 100%;
			height: 90upx;
			background-color: white;
			border-top: 1upx solid #ccc;
			display: flex;
			justify-content: space-between;

			.cancel {
				width: 50%;
				font: normal 32upx/90upx '思源黑体';
				color: #5B5B5B;
			}

			.confirm {
				width: 50%;
				background-color: #51C061;
				color: white;
				font: normal 32upx/90upx '思源黑体';
			}

			.confirm:active {
				width: 50%;
				background-color: #51C061;
				color: #5B5B5B;
				font: normal 32upx/90upx '思源黑体';
			}
		}
	}

	// @-moz-keyframes selectPrice {
	// 	0% {
	// 		width: 0px;
	// 	}

	// 	100% {
	// 		width: 20%;
	// 	}
	// }

	// @-webkit-keyframes selectPrice {
	// 	0% {
	// 		width: 0px;
	// 	}

	// 	100% {
	// 		width: 20%;
	// 	}
	// }

	// @keyframes showIndex{
	// 	0%{ opacity: 0; transform: translate(0, 100px) }
	// 	100%{opacity: 1; transform: translate(0, 0) }
	// }
</style>
